<template>
  <div class="gui-ji">
    <a @click="$router.back()">调度单管理/轨迹管理</a>
    <el-amap vid="amap"
             :zoom="zoom"
             :center="center"
             class="amap-demo">
      <el-amap-polyline v-for="prod in polyline"
                        :key="prod.id"
                        :editable="prod.editable"
                        :path="prod.path"
                        outlineColor='#fff000'
                        strokeWeight='8'
                        :events="prod.events"></el-amap-polyline>
    </el-amap>
    <div class="toolbar">
      <button type="button"
              name="button"
              v-on:click="changeEditable">change editable</button>
    </div>
  </div>
</template>
<script>
  import AMap from 'vue-amap';
  export default {
    data() {
      return {
        zoom: 14,
        center: [104.065768, 30.657452],
        polyline: [
          {
            id: '1',
            path: [//第一条线的经纬度集合
              [104.114026, 30.65119],
              [104.086022, 30.66433],
              [104.074141, 30.645897],
              [104.061836, 30.647175],
              [104.056745, 30.649365],
              [104.054835, 30.69765],
              [104.041258, 30.641882],
              [104.041046, 30.651738],
              [104.041046, 30.651738],
            ],
            events: {//在地图上打点连线的方法
              click(e) {
                alert('click polyline1111111111111')
              },
              end: (e) => {
                const newPath = e.target
                  .getPath()
                  .map((point) => [point.lng, point.lat])
                console.log(newPath)
              },
            },
            editable: false,
          },
          {
            id: '2',
            path: [//第二条线的经纬度集合
              [104.045351, 30.64361],
              [104.044797, 30.643349],
              [104.044502, 30.643254],
              [104.044123, 30.64312],
              [104.0439, 30.643059],
              [104.043689, 30.642958],
              [104.04346, 30.642849],
              [104.043225, 30.642751],
              [104.043023, 30.642652],
              [104.042878, 30.642587],
              [104.042688, 30.642507],
              [104.042488, 30.642424],
              [104.042131, 30.642265],
              [104.041985, 30.642209],
              [104.041877, 30.642151],
              [104.041747, 30.642092],
              [104.041643, 30.64204],
              [104.041564, 30.641987],
              [104.041464, 30.641938],
              [104.04143, 30.641887],
              [104.041356, 30.641841],
              [104.041355, 30.641762],
              [104.041368, 30.641623],
              [104.041382, 30.641563],
              [104.041399, 30.641477],
              [104.041442, 30.641359],
              [104.041463, 30.641295],
              [104.041525, 30.641206],
              [104.041557, 30.641104],
              [104.041618, 30.641011],
              [104.041723, 30.64086],
              [104.04177, 30.640764],
              [104.041854, 30.640668],
              [104.041919, 30.640581],
              [104.041966, 30.640546],
              [104.042013, 30.640469],
              [104.042078, 30.640399],
              [104.042136, 30.640338],
              [104.04218, 30.64029],
              [104.042303, 30.640162],
              [104.042357, 30.640101],
              [104.042492, 30.639969],
              [104.042579, 30.639895],
              [104.042638, 30.639827],
              [104.042718, 30.639759],
              [104.042794, 30.639681],
              [104.042871, 30.639595],
              [104.042932, 30.639543],
              [104.042991, 30.639488],
              [104.043034, 30.639459],
              [104.043131, 30.639527],
              [104.043206, 30.639567],
              [104.043269, 30.639601],
              [104.043366, 30.639657],
              [104.043508, 30.639791],
              [104.043546, 30.639835],
              [104.043587, 30.639847],
              [104.043609, 30.639824],
              [104.043681, 30.639753],
              [104.043736, 30.639708],
              [104.04379, 30.639662],
              [104.043837, 30.639614],
              [104.04388, 30.639572],
              [104.043877, 30.639572],
            ],
            events: {
              click(e) {
                alert('click polyline22222222222222222')
              },
              end: (e) => {
                const newPath = e.target
                  .getPath()
                  .map((point) => [point.lng, point.lat])
                console.log(newPath)
              },
            },
            editable: false,
          },
        ],
      }
    },
    methods: {
      changeEditable() {
        this.polyline.editable = !this.polyline.editable
      },
    },
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .amap-demo {
    position:absolute;
    height: 500px;
    width: 100%;
  }

  .amap-page-container {
    position: relative;
  }

  #info-window {
    width: 211px;
    height: 146px;
    margin-left: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }

  .detail {
    width: 80%;
    height: 24px;
    color: #fff;
    background-color: #1a73e8;
    position: absolute;
    bottom: 0;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
  }
</style>
